<!--
 * @Author: vera_min vera_min@163.com
 * @Date: 2025-08-22 00:49:17
 * @LastEditors: vera_min vera_min@163.com
 * @LastEditTime: 2025-08-22 04:36:42
 * @FilePath: /mail_project_destop/src/views/template/addModal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <TwoDialog id="addTemplate" v-model="showDialog" title="新增模版" width="800px" @submit="handlerSave" @close="handlerCancel">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="80px" style="padding: 6px 12px 20px 12px;">
      <el-form-item label="模版名称" prop="title">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="模版内容" prop="content">
        <SummerNote id="templateSummerNote" style="width: 100%;border: 1px solid #dcdfe6;" :height="300" v-model="form.content"
          @change="handleContentChange" />
      </el-form-item>
    </el-form>
  </TwoDialog>
</template>

<script lang="ts" setup>
import { defineProps, ref } from 'vue';
import api from '/@/api/email/index';
import { ElMessage } from 'element-plus';
import SummerNote from '/@/components/summerNote/index.vue';

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
});

const form = ref(props.data);
const formRef = ref(null);

const rules = {
  title: [{ required: true, message: '请输入模版名称', trigger: 'blur' }],
  content: [{ required: true, message: '请输入模版内容', trigger: 'blur' }],
};

const emit = defineEmits(['close']);
const showDialog = ref(false)

const handlerCancel = () => {
  emit('close');
};

const handlerSave = async () => {
  try {
    await formRef.value.validate();
    const saveFun = form.value.id ? api.template.edit : api.template.add;
    const res = await saveFun(form.value);
    if (res.code === 200) {
      ElMessage({ type: 'success', message: '操作成功' });
      emit('close', true);
    }
  } catch (error) {
    console.log('表单验证失败:', error);
    // 验证失败时不执行保存操作
  }
};

const handleContentChange = () => {
  // 当内容改变时，清除该字段的验证错误
  if (formRef.value) {
    formRef.value.clearValidate('content');
  }
};

defineExpose({
  showDialog
})
</script>
<style lang="scss" scoped></style>